<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<div class="all">
		<header id="zero">
			<div class="zero">
				<div class="logo"><img src="images/logo.png"></div>
				<nav>
					<ul>
						<li><a href="#one">首页</a></li>
						<li><a href="#two">自驾导航</a></li>
						<li><a href="#three">共享出行</a></li>
						<li><a href="#four1">公共出行</a></li>
						<li><a href="#four">信息服务</a></li>
						<li><a href="#five">相关下载</a></li>
					</ul>		
				</nav>
				<ul class="phone">
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>			
		</header>
		<section class="one" id="one">
			<div class="o1">
				<h1>速速地图</h1>
				<p class="p1">导航专业&nbsp;&nbsp;数据准确</p>
				<div class="p2">&nbsp;&nbsp;立刻下载</div>
			</div>
			<div class="o2"><img src="images/header.gif"></div>
		</section>
		<section  class="two" id="two">
			<h1>自驾导航</h1>
			<div>
				<div class="t1">
					<img src="images/content1Img1.png">
					<p class="p1">实时动态路况</p>
					<p class="p2">前方拥堵早知道</p>
				</div>
				<div class="t1">
					<img src="images/content1Img2.png">
					<p class="p1">全程优选路线</p>
					<p class="p2">第一时间找到最优路线</p>
				</div>
				<div class="t1">
					<img src="images/content1Img3.png">
					<p class="p1">180W+电子眼</p>
					<p class="p2">地图数据专业告别违章</p>
				</div>
				<div class="t1">
					<img src="images/content1Img4.png">
					<p class="p1">明星语音导航</p>
					<p class="p2">全程快乐前进</p>
				</div>
			</div>
			
		</section>
		<section class="three" id="three">
			<h1>共享出行</h1>
			<div >
				<div class="t1">
					<img src="images/as1.png">
					<p class="p1">叫车</p>
					<p class="p2">速速叫车，优惠多多<br>车辆多选，同时发单，更快接驾</p>
				</div>
				<div class="t1">
					<img src="images/as2.png">
					<p class="p1">顺风车</p>
					<p class="p2">让奋斗的人温暖到家，优质自驾车主<span>，安全安心</span><br>
					公益出行不抽佣，车主多赚钱，乘客少花钱
				</p>
				</div>
			</div>
		</section>
		<section  class="two" id="four1">
			<h1>公共出行</h1>
			<div>
				<div class="t1">
					<img src="images/a1.png">
					<p class="p1">实时公交</p>
					<p class="p2">等车时间一目了然</p>
				</div>
				<div class="t1">
					<img src="images/a2.png">
					<p class="p1">共享单车</p>
					<p class="p2">找车开锁导航随我</p>
				</div>
				<div class="t1">
					<img src="images/a3.png">
					<p class="p1">电动自行车</p>
					<p class="p2">禁行数据更准确</p>
				</div>
				<div class="t1">
					<img src="images/a4.png">
					<p class="p1">混合规划</p>
					<p class="p2">骑行公交一步搞定</p>
				</div>
			</div>
		</section>
		<section class="four" id="four">
			<h1>信息服务</h1>
			<div>
				<div class="f1">
					<div class="f11">
						<p>发现周边</p>
						<p class="pf1">搜索周边精彩世界，丰富场景精准推荐</p>
					</div>
					<div class="f12">
						<p>搜索异地</p>
						<p class="pf1">异地搜索人气推荐，旅途间发现精彩世界</p>
					</div>
				</div>
				<div class="f2"><div></div></div>
				<div class="f3">
					<div class="f11">
						<p>海量精准“动态”数据</p>
						<p class="pf1">停车场、充电桩数据全，动态准，助您无忧出行</p>
					</div>
					<div class="f12">
						<p>综合数据源</p>
						<p class="pf1">吃住玩儿，多方评论和报价任你看</p>
					</div>

				</div>
			</div>
		</section>
		<section class="five" id="five">
			<h1>相关下载</h1>
			<div class="ff">
				<div class="ff1">
					<div class="fff1">
						<div>
							<img class="img" src="images/apple.png">
							<img class="img1" src="images/apple2.png">
						</div>
						<div>
						<h1>IOS</h1><p><span>苹果版下载</span></p>
						</div>
					</div>
				</div>
				<div class="ff1">
					<div class="fff1">
						<div>
							<img class="img" src="images/and.png">
							<img class="img1" src="images/and2.png">
						</div>
						<div>
						<h1>Android</h1><p><span>安卓版下载</span></p>
						</div>
					</div>
				</div>
				<div class="ff1">
					<div class="fff1">
						<div>
							<img  class="img" src="images/beta.png">
							<img  class="img1" src="images/beta2.png">
						</div>
						<div>
						<h1>Android Beta</h1>
						<p><span>安卓测试版下载</span></p>
						</div>
					</div>
				</div>
				<div class="ff4">
					<div><img src="images/c3.png"></div>
					<div>
						<h1>二维码</h1><p>扫一扫下载</p>
					</div>
					
				</div>
			</div>
		</section>

		<footer id="footer">	
			
			<p>©2019 速速地图 </p>
		</footer>
	</div>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
		
			$(function(){
				$(".phone").click(function(){
					$("nav").slideToggle();
				})
				$(window).resize(function(){
					if($(this).width()>767){
						$("nav").show();
					}
					else{
						$("nav").hide();
					}
				})
			})
	</script>
</body>
</html>